<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>节点之间连多条线</title>
  </head>
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 600,
        defaultNode: {
          size: [40, 40],
        },
        defaultEdge: {
          shape: 'quadratic',
        },
        modes: {
          default: ['drag-node', 'drag-canvas'],
        },
      });

      const data = {
        nodes: [
          {
            id: 'node1',
            label: 'node1',
            x: 500,
            y: 200,
            anchorPoints: [
              [0, 1],
              [0.5, 1],
            ],
            shape: 'rect',
          },
          {
            id: 'node2',
            label: 'node2',
            x: 300,
            y: 400,
            anchorPoints: [
              [0.5, 0],
              [1, 1],
            ],
            shape: 'rect',
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
            sourceAnchor: 0,
            targetAnchor: 0,
            style: {
              endArrow: true,
            },
          },
          {
            source: 'node2',
            target: 'node1',
            sourceAnchor: 1,
            targetAnchor: 1,
            style: {
              endArrow: true,
            },
          },
        ],
      };

      graph.data(data);
      graph.render();

      graph.getNodes().forEach(node => {
        const anchor = node.getAnchorPoints();
        console.log(anchor);
      });
    </script>
  </body>
</html>
